<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>校园失物招领系统 - 首页</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <!-- 欢迎信息 -->
        <div class="card mb-4">
            <div class="card-body text-center py-5">
                <h1 class="display-5 fw-bold text-primary mb-4">校园失物招领平台</h1>
                <p class="lead mb-4">帮助师生快速找回丢失物品，方便拾获者归还物品</p>
                <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                    <a href="/items?status=LOST" class="btn btn-danger btn-lg px-4 me-md-2">
                        <i class="fas fa-search me-2"></i>寻物启事
                    </a>
                    <a href="/items?status=FOUND" class="btn btn-success btn-lg px-4">
                        <i class="fas fa-hand-holding me-2"></i>招领启事
                    </a>
                    <!-- 已登录用户显示发布信息按钮 -->
                    <a th:if="${#authentication != null && #authentication.authenticated}" href="/items/new" class="btn btn-primary btn-lg px-4 ms-md-2">
                        <i class="fas fa-plus-circle me-2"></i>发布信息
                    </a>
                    <!-- 未登录用户显示登录/注册按钮 -->
                    <div th:unless="${#request.userPrincipal != null}" class="d-grid gap-2 d-md-flex">
                        <a href="/login" class="btn btn-primary btn-lg px-4 ms-md-2">
                            <i class="fas fa-sign-in-alt me-2"></i>登录
                        </a>
                        <a href="/register" class="btn btn-outline-primary btn-lg px-4">
                            <i class="fas fa-user-plus me-2"></i>注册
                        </a>
                    </div>
                </div>
                
                <!-- 管理员直接访问链接 -->
                <div th:if="${#request.userPrincipal != null && #request.userPrincipal.name == 'admin'}" class="mt-3">
                    <a href="/admin/direct-access" class="btn btn-warning btn-sm">
                        <i class="fas fa-user-shield me-2"></i>管理用户
                    </a>
                    <a href="/admin" class="btn btn-info btn-sm ms-2">
                        <i class="fas fa-tachometer-alt me-2"></i>管理控制台
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 已登录用户显示的操作按钮 -->
        <div th:if="${#request.userPrincipal != null}" class="text-center mt-4">
            <div class="d-grid gap-2 d-md-flex justify-content-center">
                <a href="/items/new" class="btn btn-success btn-lg">
                    <i class="fas fa-plus-circle me-2"></i>发布新信息
                </a>
                <a href="/profile" class="btn btn-primary btn-lg">
                    <i class="fas fa-user-circle me-2"></i>个人中心
                </a>
                <a href="/login-status" class="btn btn-info btn-lg text-white">
                    <i class="fas fa-info-circle me-2"></i>检查登录状态
                </a>
            </div>
        </div>
        
        <!-- 按类型分类展示 -->
        <h2 class="mb-4"><i class="fas fa-tag me-2"></i>按物品类型分类</h2>
        
        <div th:each="type : ${itemTypes}" class="card mb-4" th:if="${itemsByType.containsKey(type)}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="h5 mb-0">
                    <i class="fas" th:classappend="${
                        type.name() == 'ELECTRONICS' ? 'fa-laptop' : 
                        type.name() == 'BOOKS' ? 'fa-book' : 
                        type.name() == 'CLOTHING' ? 'fa-tshirt' : 
                        type.name() == 'ACCESSORIES' ? 'fa-glasses' : 
                        type.name() == 'DOCUMENT' ? 'fa-id-card' : 
                        'fa-box'
                    }"></i>
                    <span th:text="${type.displayName}">物品类型</span>
                </h3>
                <a th:href="@{/items(type=${type})}" class="btn btn-sm btn-outline-primary">
                    查看更多 <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            <div class="card-body p-0">
                <div class="row row-cols-1 row-cols-md-5 g-0">
                    <div class="col" th:each="item : ${itemsByType.get(type)}">
                        <div class="card h-100 m-2 shadow-sm">
                            <!-- 状态标签 -->
                            <div class="position-absolute top-0 end-0 p-2">
                                <span class="badge" th:classappend="${item.status == T(meiyunting.shiwuzhaoling.model.ItemStatus).LOST ? 'bg-danger' : 'bg-success'}"
                                      th:text="${item.status != null ? item.status.displayName : '未知'}"></span>
                            </div>
                            
                            <!-- 图片 -->
                            <div class="card-img-top-container" style="height: 150px; overflow: hidden;">
                                <img th:if="${item.imagePath != null}" th:src="${item.imagePath}" class="card-img-top" style="object-fit: cover; height: 100%; width: 100%;" alt="物品图片">
                                <img th:if="${item.imagePath == null}" src="/static/images/no-image.svg" class="card-img-top" style="object-fit: cover; height: 100%; width: 100%;" alt="无图片">
                            </div>
                            
                            <div class="card-body">
                                <h5 class="card-title text-truncate" th:text="${item.title != null ? item.title : '无标题'}">物品标题</h5>
                                <p class="card-text small text-truncate" th:text="${item.description != null ? item.description : '无描述'}">物品描述...</p>
                                <div class="d-grid mt-2">
                                    <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-sm btn-outline-primary">
                                        查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 最新失物招领 -->
        <div class="row">
            <!-- 最新寻物启事 -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="h5 mb-0">
                            <i class="fas fa-search me-2 text-danger"></i>
                            <span>最新寻物启事</span>
                        </h3>
                        <a href="/items?status=LOST" class="btn btn-sm btn-outline-danger">
                            查看更多 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            <a th:each="item : ${lostItems}" th:href="@{/items/{id}(id=${item.id})}" 
                               class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="badge bg-secondary me-2" th:text="${item.type.displayName}">类型</span>
                                    <span th:text="${item.title}">物品标题</span>
                                </div>
                                <small class="text-muted" th:text="${item.lostTime != null && #temporals != null ? #temporals.format(item.lostTime, 'MM-dd') : (item.createdAt != null && #temporals != null ? #temporals.format(item.createdAt, 'MM-dd') : '未知')}">日期</small>
                            </a>
                            <a th:if="${lostItems.isEmpty()}" class="list-group-item text-center py-3">
                                <i class="fas fa-info-circle me-2"></i> 暂无寻物启事
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最新招领启事 -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="h5 mb-0">
                            <i class="fas fa-hand-holding me-2 text-success"></i>
                            <span>最新招领启事</span>
                        </h3>
                        <a href="/items?status=FOUND" class="btn btn-sm btn-outline-success">
                            查看更多 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            <a th:each="item : ${foundItems}" th:href="@{/items/{id}(id=${item.id})}" 
                               class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="badge bg-secondary me-2" th:text="${item.type.displayName}">类型</span>
                                    <span th:text="${item.title}">物品标题</span>
                                </div>
                                <small class="text-muted" th:text="${item.lostTime != null && #temporals != null ? #temporals.format(item.lostTime, 'MM-dd') : (item.createdAt != null && #temporals != null ? #temporals.format(item.createdAt, 'MM-dd') : '未知')}">日期</small>
                            </a>
                            <a th:if="${foundItems.isEmpty()}" class="list-group-item text-center py-3">
                                <i class="fas fa-info-circle me-2"></i> 暂无招领启事
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <style>
        /* 首页特有样式 */
        .hero-section {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            padding: 3rem 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }
        
        .stat-card {
            transition: all 0.3s;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
            font-size: 2.5rem;
            color: #3498db;
            background-color: rgba(52, 152, 219, 0.1);
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 50%;
            margin: 0 auto;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 1rem 0;
            background: linear-gradient(135deg, #3498db, #2ecc71);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .stat-label {
            font-size: 1.1rem;
            color: #777;
            margin-bottom: 0;
        }
        
        .guide-step {
            text-align: center;
            padding: 1.5rem;
            border-radius: 10px;
            background-color: #f8f9fa;
            height: 100%;
            transition: all 0.3s;
        }
        
        .guide-step:hover {
            background-color: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transform: translateY(-5px);
        }
        
        .guide-icon {
            font-size: 2rem;
            color: #3498db;
            position: relative;
            width: 70px;
            height: 70px;
            line-height: 70px;
            background-color: rgba(52, 152, 219, 0.1);
            border-radius: 50%;
            margin: 0 auto 1rem;
        }
        
        .guide-number {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            font-size: 0.9rem;
            background-color: #3498db;
            color: white;
            border-radius: 50%;
        }
        
        /* 针对首页的卡片调整 */
        .col .card {
            animation-delay: calc(0.1s * var(--i, 0));
        }
    </style>
    
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // 添加卡片动画延迟
            const cards = document.querySelectorAll('.col');
            cards.forEach((card, index) => {
                card.style.setProperty('--i', index);
            });
            
            // 活跃导航项
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                if (link.getAttribute('href') === '/') {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html> 